<template>
  <div id="personalCollection">
    <!-- 内容区域 -->
    <div class="wrapper">
      <!-- 返回按钮 -->
      <div class="back_part">
        <div class="back_btn" @click="goBack">
          <img src="@/assets/images/pc_black/auth/back.png" />
          <span>返回</span>
        </div>
      </div>
      <div class="contentContainer">
        <!-- 标题 -->
        <div class="contentTitle">我的收藏</div>

        <!-- 内容 -->
        <div class="contentBody">
          <ul>
            <li class="contentItem" v-for="item in collectionData" :key="item.id" @click.stop="buyProduct(item)">
              <div class="contentItemWrapper">
                <div class="dis-flex">
                  <div class="contentItem_img">
                    <img :src="show_url + item.images[0]" />
                  </div>
                  <div class="infomation">
                    <div class="info_title">
                      {{ titleSubstring(item.goods_name) }}
                    </div>
                    <div class="info_desc">
                      {{ descSubstring(item.goods_desc) }}
                    </div>
                    <div class="info_price">
                      <span class="yang">¥ </span>{{ item.price }}
                    </div>
                  </div>
                </div>

                <div class="cancel_collect dis-flex f-y-center f-x-center" @click.stop="cancelCollection(item)">
                  <img class="star" src="@/assets/images/pc_black/center/cancel_collection.png" alt="" />
                  <div class="cancel_txt">取消收藏</div>
                </div>
              </div>
            </li>
          </ul>

          <div class="noneTip" v-if="collectionData.length <= 0">
            <img class="noneTip_img" src="@/assets/images/mobile_black/center/null.png" />
            <div class="noneTip_txt">您还未收藏过任何商品哦～</div>
          </div>
        </div>

        <!-- 分页 -->
        <div class="pag" v-if="collectionData.length > 0">
          <ElPage @handleCurrentChange="handleCurrentChange" :total="total" />
        </div>
      </div>
    </div>

    <!-- mobile -->
    <div class="mProducts">
      <MobilePersonalProducts :productData="collectionData" :show_url="show_url" @productCancel="cancelCollection"
        @buyProduct="buyProduct" @upCallback="upCallback">
        <template slot="cancelCollection">
          <div class="cancelBox">
            <img class="cancelImg" src="@/assets/images/mobile_black/center/collection_cancel.png" />
            <span class="cancelFont">取消收藏</span>
          </div>
        </template>

        <template slot="noneCollection">
          <div class="nullBox">
            <img src="@/assets/images/mobile_black/center/null.png" />
            <p>您还未收藏过任何商品哦～</p>
          </div>
        </template>
      </MobilePersonalProducts>
    </div>
  </div>
</template>

<script>
import { ElPage } from "@/components";
import MobilePersonalProducts from "./components/MobilePersonalProducts.vue";
import { getMyCollectListApi, resetCollectApi } from "@/api";
import { iscode, getWidth, escapeHTML } from "@/utils";
import { mapActions, mapState } from "vuex";

export default {
  name: "PersonalCollection",
  components: { ElPage, MobilePersonalProducts },
  data() {
    return {
      // 收藏的商品
      collectionData: [],
      // 默认当前分页
      currentPage: 1,
      // 每页显示个数
      perPage: 4,
      // 一共有多少个
      total: 0,
      // 图片路径
      show_url: "",
      mescroll: "",
    };
  },
  computed: {
    // 用户信息
    ...mapState(["userInfo"]),
  },
  mounted() {
    this.getMyCollectList();
  },
  beforeDestroy() {
    let cardCount = JSON.parse(localStorage.getItem("cardCount"));
    cardCount.collect_num = this.userInfo.collect_num;
    localStorage.setItem("cardCount", JSON.stringify(cardCount));
  },
  methods: {
    // -----以下是异步相关方法-----
    // 获取收藏列表数据
    async getMyCollectList() {
      let result = await getMyCollectListApi({
        page: this.currentPage,
        pagesize: this.perPage,
      });
      if (iscode(result)) {
        this.collectionData = result.result.list; // 数据
        this.show_url = result.result.show_url; // 图片地址
        this.total = result.result.count; // 总量
      }
    },

    // 取消收藏
    async resetCollect(goods_id) {
      let result = await resetCollectApi({
        goods_id: goods_id,
      });
      if (iscode(result)) {
        if (getWidth() <= 768) {
          this.$toast({
            className: "cancelMine",
            message: "取消收藏成功",
            duration: 2000,
          });
        } else {
          this.$message({
            message: "取消收藏成功",
            iconClass: "mySuccessIcon",
            customClass: "mySuccess",
          });
        }
        // 获取/重新获取用户信息
        this.getUserInfo();
        // 获取/重新获取点赞列表
        this.getMyCollectList();
      }
    },

    //上拉加载
    async upCallback(payload) {
      this.mescroll = payload.mescroll;
      let result = await getMyCollectListApi({
        page: payload.page.num,
        pagesize: payload.page.size,
      });
      if (iscode(result)) {
        let arr = result.result.list;
        // 如果是第一页需手动置空列表
        if (payload.page.num === 1) {
          this.collectionData = [];
        }
        // 把请求到的数据添加到列表
        this.collectionData = this.collectionData.concat(arr);

        // 数据渲染成功后,隐藏下拉刷新的状态
        this.$nextTick(() => {
          this.mescroll.endSuccess(arr.length);
        });
      }
    },

    // ----以下是功能性方法----
    // 获取/重新获取用户信息
    ...mapActions(["getUserInfo"]),

    // 切换页码
    handleCurrentChange(n) {
      this.currentPage = n;
      this.getMyCollectList();
    },
    changePage(payload) {
      this.currentPage = payload;
      this.getMyCollectList();
    },
    // 取消收藏
    cancelCollection(product) {
      this.resetCollect(product.goods_id);
    },
    titleSubstring(desc) {
      let res = desc;
      if (desc.length > 60) {
        res = desc.substring(0, 60) + "...";
      }
      return res;
    },
    descSubstring(desc) {
      let res = escapeHTML(desc);
      let result = "";
      if (res.length > 30) {
        result = res.substring(0, 30) + "...";
        return result;
      } else {
        return res;
      }
    },

    // ----以下是跳转相关方法----
    // 跳转到对应的商品详情界面
    buyProduct({ goods_id }) {
      this.$router.push({
        path: "/mail/productDetail",
        query: {
          id: goods_id,
        },
      });
    },
    // 返回按钮触发返回到上个界面
    goBack() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="less" scoped>
.w1190 {
  position: relative;
  max-width: 1190px;
  margin: 0 auto;
  padding-top: 20px;
}

.dis-flex {
  display: flex;
}

.f-y-center {
  align-items: center;
}

.f-x-center {
  justify-content: center;
}

.f-x-between {
  justify-content: space-between;
}

#personalCollection {
  width: 100%;
  min-height: 991px;

  // -隐藏移动端
  .mProducts {
    display: none;
  }

  // -版心
  .wrapper {
    width: 1200px;
    margin: 0 auto;
    overflow: hidden; // bfa
  }

  // -退回按钮div
  .back_part {
    width: 100%;
    padding-top: 20px;

    .back_btn {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 104px;
      height: 30px;
      border: none;
      background: none;
      background-image: url("../../assets/images/personalCenter/btn.png");
      background-position: center center;
      background-size: 100% 100%;
      cursor: pointer;

      img {
        width: 20px;
        height: 6px;
      }

      span {
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
        line-height: 12px;
        margin-left: 10px;
      }
    }
  }

  // -内容总框
  .contentContainer {
    margin-top: 30px;
    width: 100%;

    // 内容标题样式
    .contentTitle {
      box-sizing: border-box;
      height: 22px;
      font-size: 18px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #fff;
    }

    // 具体内容样式
    .contentBody {
      width: 100%;
      height: 613px;
      padding-top: 20px;

      // 数据空时的提示语
      .noneTip {
        text-align: center;
        margin-top: 30px;
        font-size: 20px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        opacity: 0.6;
      }

      .noneTip_txt {
        width: 100%;
        font-size: 14px;
        color: #999;
        margin-top: 20px;
        text-align: center;
      }

      .noneTip_img {
        width: 260px;
      }

      // 去除默认样式
      ul,
      li {
        padding: 0;
        margin: 0;
        list-style: none;
      }

      //每一项
      .contentItem {
        width: 100%;
        padding: 15px 20px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #333333;
        margin-bottom: 15px;
        background: #1e2020;
        color: #fff;

        .contentItemWrapper {
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 100%;
          height: 107px;

          .infomation {
            position: relative;
            margin-left: 20px;
            font-size: 0;

            .info_title {
              width: 300px;
              font-size: 14px;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 500;
              color: #ffffff;
              line-height: 18px;
              word-break: break-all;
              /* 纯英文换行 */
              // overflow: hidden;
              // text-overflow: ellipsis;
              // /* 弹性伸缩盒子模型显示 */
              // display: -webkit-box;
              // /* 限制在一个块元素显示的文本行数 */
              // -webkit-line-clamp: 2;
              // /* 设置或检索伸缩盒对象的子元素的排列方式 */
              // -webkit-box-orient: vertical;
            }

            .info_desc {
              width: 300px;
              font-size: 12px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #999999;
              line-height: 12px;
              margin-top: 10px;
              // overflow: hidden;
              // text-overflow: ellipsis;
              // /* 弹性伸缩盒子模型显示 */
              // display: -webkit-box;
              // /* 限制在一个块元素显示的文本行数 */
              // -webkit-line-clamp: 1;
              // /* 设置或检索伸缩盒对象的子元素的排列方式 */
              // -webkit-box-orient: vertical;
              white-space: nowrap;
            }

            .info_price {
              position: absolute;
              bottom: 0;
              font-size: 18px;
              font-family: DINAlternate-Bold, DINAlternate;
              font-weight: bold;
              color: #00ffb0;
              line-height: 14px;
            }

            .yang {
              font-size: 12px;
            }
          }

          // 图片
          .contentItem_img {
            img {
              width: 90px;
              height: 90px;
            }
          }

          // 标题
          .contentItem_title {
            height: 18px;
            font-size: 16px;
            text-align: center;
            width: 200px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          // 描述内容
          .contentItem_content {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 608px;
            text-align: center;
            // height: 72px;
            font-size: 16px;
            line-height: 28px;
            // overflow: auto;
            // overflow: hidden;
            // text-overflow: ellipsis;
            // white-space: nowrap;
            word-break: break-all;
            display: -webkit-box;
            /**对象作为伸缩盒子模型展示**/
            -webkit-box-orient: vertical;
            /**设置或检索伸缩盒子对象的子元素的排列方式**/
            -webkit-line-clamp: 3;
            /**显示的行数**/
            overflow: hidden;
            /**隐藏超出的内容**/
          }

          // 收藏按钮
          .contentItem_btn {
            padding: 0;
            min-width: 70px;
            height: 35px;
            background: #ffffff;
            border: 1px solid #b3b3b3;
            border-radius: 5px;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #999999;
            line-height: 14px;
            cursor: pointer;
          }
        }

        .cancel_collect {
          min-width: 102px;
          height: 30px;
          border-radius: 2px;
          border: 1px solid #999999;
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #999999;
          line-height: 14px;
          cursor: pointer;

          .star {
            width: 16px;
            height: 15px;
          }

          .cancel_txt {
            padding-left: 6px;
            color: #999;
            font-size: 14px;
          }
        }
      }
    }

    // 底部分页
    .pag {
      display: flex;
      justify-content: center;
      width: 100%;
      margin-top: 23px;

      /deep/.pagination>.page-item.active>a {
        background-color: #0b81ef;
      }
    }
  }
}

// mobile （<=768）
@media screen and (max-width: 768px) {
  #personalCollection {
    height: 100%;

    // 隐藏pc端
    .back_part {
      display: none;
    }

    .contentContainer {
      display: none;
    }

    .mProducts {
      display: block;
      width: 100%;
      height: 100%;

      .cancelBox {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        width: 100%;

        .cancelImg {
          width: 20px;
          height: 18px;
        }

        .cancelFont {
          font-size: 20px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #999999;
          margin-left: 8px;
          line-height: 24px;
        }
      }

      .nullBox {
        display: flex;
        flex-direction: column;
        align-items: center;

        img {
          width: 430px;
          height: 400px;
          margin-top: 194px;
        }

        p {
          font-size: 28px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #999999;
          line-height: 28px;
          margin-top: 50px;
          text-align: center;
        }
      }
    }
  }
}
</style>
